<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理系统 - 首页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        gray: {
                            50: '#F5F7FA',
                            100: '#E5E6EB',
                            200: '#C9CDD4',
                            300: '#86909C',
                            400: '#4E5969',
                            500: '#272E3B',
                            600: '#1D2129',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
            }
            .btn-hover {
                @apply transition-all duration-300 hover:shadow-lg transform hover:-translate-y-0.5;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen font-sans">
    <!-- 导航栏 -->
    <header class="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <i class="fa fa-graduation-cap text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-gray-600">学生信息管理系统</h1>
            </div>
            <nav class="hidden md:flex items-center space-x-8">
                <a href="index.html" class="text-primary font-medium">首页</a>
                <a href="all-students.html" class="text-gray-400 hover:text-primary transition-colors">全部学生</a>
                <a href="student-by-id.html" class="text-gray-400 hover:text-primary transition-colors">ID查询</a>
                <a href="students-by-status.html" class="text-gray-400 hover:text-primary transition-colors">状态查询</a>
                <a href="update-student.html" class="text-gray-400 hover:text-primary transition-colors">信息更新</a>
            </nav>
            <button class="md:hidden text-gray-500">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 py-12">
        <!-- 欢迎区域 -->
        <div class="text-center mb-16">
            <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-gray-600 mb-4">欢迎使用
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">学生信息管理系统</span>
            </h2>
            <p class="text-gray-400 max-w-2xl mx-auto text-lg">高效管理学生信息，支持多种查询方式和信息更新</p>
        </div>

        <!-- 功能卡片区域 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
            <!-- 查询所有学生卡片 -->
            <a href="all-students.html" class="block bg-white rounded-xl p-8 card-shadow card-hover">
                <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-6">
                    <i class="fa fa-users text-primary text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-600 mb-3">查询所有学生</h3>
                <p class="text-gray-400 mb-4">查看系统中的全部学生信息，支持分页和基本筛选</p>
                <div class="flex items-center text-primary font-medium">
                    <span>查看所有学生</span>
                    <i class="fa fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i>
                </div>
            </a>

            <!-- 根据学号查询卡片 -->
            <a href="student-by-id.html" class="block bg-white rounded-xl p-8 card-shadow card-hover">
                <div class="w-16 h-16 rounded-full bg-secondary/10 flex items-center justify-center mb-6">
                    <i class="fa fa-id-card text-secondary text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-600 mb-3">根据学号查询</h3>
                <p class="text-gray-400 mb-4">通过学生学号精确查询学生详细信息</p>
                <div class="flex items-center text-secondary font-medium">
                    <span>按学号查询</span>
                    <i class="fa fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i>
                </div>
            </a>

            <!-- 根据状态查询卡片 -->
            <a href="students-by-status.html" class="block bg-white rounded-xl p-8 card-shadow card-hover">
                <div class="w-16 h-16 rounded-full bg-success/10 flex items-center justify-center mb-6">
                    <i class="fa fa-filter text-success text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-600 mb-3">根据状态查询</h3>
                <p class="text-gray-400 mb-4">按学生状态筛选，查看正常或已删除的学生信息</p>
                <div class="flex items-center text-success font-medium">
                    <span>按状态筛选</span>
                    <i class="fa fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i>
                </div>
            </a>

            <!-- 根据姓名查询卡片 -->
            <a href="students-by-name.html" class="block bg-white rounded-xl p-8 card-shadow card-hover">
                <div class="w-16 h-16 rounded-full bg-warning/10 flex items-center justify-center mb-6">
                    <i class="fa fa-user text-warning text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-600 mb-3">根据姓名查询</h3>
                <p class="text-gray-400 mb-4">通过学生姓名进行模糊查询，快速找到目标学生</p>
                <div class="flex items-center text-warning font-medium">
                    <span>按姓名搜索</span>
                    <i class="fa fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i>
                </div>
            </a>

            <!-- 更新学生信息卡片 -->
            <a href="update-student.html" class="block bg-white rounded-xl p-8 card-shadow card-hover">
                <div class="w-16 h-16 rounded-full bg-danger/10 flex items-center justify-center mb-6">
                    <i class="fa fa-pencil text-danger text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-600 mb-3">更新学生信息</h3>
                <p class="text-gray-400 mb-4">修改学生的各项信息，包括基本资料和联系方式</p>
                <div class="flex items-center text-danger font-medium">
                    <span>更新信息</span>
                    <i class="fa fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i>
                </div>
            </a>

            <!-- 系统信息卡片 -->
            <div class="bg-gradient-to-br from-primary/5 to-secondary/5 rounded-xl p-8 card-shadow border border-primary/10">
                <div class="w-16 h-16 rounded-full bg-white flex items-center justify-center mb-6">
                    <i class="fa fa-info-circle text-primary text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-600 mb-3">系统信息</h3>
                <ul class="space-y-2 text-gray-400 mb-4">
                    <li class="flex items-center"><i class="fa fa-check-circle text-success mr-2"></i> 实时数据更新</li>
                    <li class="flex items-center"><i class="fa fa-check-circle text-success mr-2"></i> 响应式界面设计</li>
                    <li class="flex items-center"><i class="fa fa-check-circle text-success mr-2"></i> 数据安全保护</li>
                </ul>
                <p class="text-gray-500 text-sm">系统版本 v1.0.0</p>
            </div>
        </div>

        <!-- 统计信息 -->
        <div class="bg-white rounded-xl p-8 card-shadow">
            <h3 class="text-xl font-semibold text-gray-600 mb-6">系统概览</h3>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div class="border border-gray-100 rounded-lg p-6 bg-gray-50">
                    <div class="flex items-center justify-between mb-3">
                        <h4 class="text-gray-400 font-medium">总学生数</h4>
                        <span class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                            <i class="fa fa-users text-primary"></i>
                        </span>
                    </div>
                    <p class="text-3xl font-bold text-gray-600" id="totalStudents">--</p>
                </div>
                <div class="border border-gray-100 rounded-lg p-6 bg-gray-50">
                    <div class="flex items-center justify-between mb-3">
                        <h4 class="text-gray-400 font-medium">正常状态</h4>
                        <span class="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center">
                            <i class="fa fa-check-circle text-success"></i>
                        </span>
                    </div>
                    <p class="text-3xl font-bold text-gray-600" id="normalStudents">--</p>
                </div>
                <div class="border border-gray-100 rounded-lg p-6 bg-gray-50">
                    <div class="flex items-center justify-between mb-3">
                        <h4 class="text-gray-400 font-medium">已删除</h4>
                        <span class="w-10 h-10 rounded-full bg-danger/10 flex items-center justify-center">
                            <i class="fa fa-times-circle text-danger"></i>
                        </span>
                    </div>
                    <p class="text-3xl font-bold text-gray-600" id="deletedStudents">--</p>
                </div>
                <div class="border border-gray-100 rounded-lg p-6 bg-gray-50">
                    <div class="flex items-center justify-between mb-3">
                        <h4 class="text-gray-400 font-medium">操作成功率</h4>
                        <span class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center">
                            <i class="fa fa-line-chart text-warning"></i>
                        </span>
                    </div>
                    <p class="text-3xl font-bold text-gray-600" id="successRate">--</p>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white mt-16 py-8 border-t border-gray-100">
        <div class="container mx-auto px-4 text-center text-gray-400 text-sm">
            <p>© 2023 学生信息管理系统 - 版权所有</p>
            <div class="flex justify-center items-center space-x-4 mt-4">
                <a href="#" class="hover:text-primary transition-colors"><i class="fa fa-question-circle mr-1"></i>帮助中心</a>
                <a href="#" class="hover:text-primary transition-colors"><i class="fa fa-file-text-o mr-1"></i>使用文档</a>
                <a href="#" class="hover:text-primary transition-colors"><i class="fa fa-envelope-o mr-1"></i>联系我们</a>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取统计数据
            fetch('/getAllStudents')
                .then(response => response.json())
                .then(data => {
                    if (Array.isArray(data)) {
                        const totalStudents = data.length;
                        const normalStudents = data.filter(student => student.status === 1).length;
                        const deletedStudents = totalStudents - normalStudents;
                        const successRate = '99.8%'; // 模拟数据

                        // 更新UI
                        document.getElementById('totalStudents').textContent = totalStudents;
                        document.getElementById('normalStudents').textContent = normalStudents;
                        document.getElementById('deletedStudents').textContent = deletedStudents;
                        document.getElementById('successRate').textContent = successRate;

                        // 添加数字动画效果
                        animateNumbers();
                    }
                })
                .catch(error => {
                    console.error('获取统计数据失败:', error);
                    // 使用模拟数据
                    document.getElementById('totalStudents').textContent = '128';
                    document.getElementById('normalStudents').textContent = '120';
                    document.getElementById('deletedStudents').textContent = '8';
                    document.getElementById('successRate').textContent = '99.8%';
                });

            // 数字动画函数
            function animateNumbers() {
                const numbers = document.querySelectorAll('#totalStudents, #normalStudents, #deletedStudents');
                numbers.forEach(element => {
                    const target = parseInt(element.textContent);
                    element.textContent = '0';
                    
                    const duration = 1500;
                    const steps = 30;
                    const increment = target / steps;
                    let current = 0;
                    
                    const timer = setInterval(() => {
                        current += increment;
                        if (current >= target) {
                            element.textContent = target;
                            clearInterval(timer);
                        } else {
                            element.textContent = Math.floor(current);
                        }
                    }, duration / steps);
                });
            }

            // 添加卡片悬停效果
            const cards = document.querySelectorAll('.card-hover');
            cards.forEach(card => {
                card.addEventListener('mouseenter', () => {
                    card.classList.add('shadow-xl', '-translate-y-1');
                });
                card.addEventListener('mouseleave', () => {
                    card.classList.remove('shadow-xl', '-translate-y-1');
                });
            });
        });
    </script>
</body>
</html>